<template>
	<view class="Detailed">
		<view class="top">
			<view class="title">交易时间</view>
			<view class="title">交易类型</view>
			<view class="title">交易金额</view>
		</view>
		<view class="list" v-for="(item,index) in list" :key="index" @click="golink(item.type,item.id)">
			<view class="time">
				<text>{{item.date}}</text>
				<text style="font-size: 12px;color:#8C9FAD;">{{item.time}}</text>
			</view>
			<view class="type">{{item.type_name}}</view>
			<view class="money" v-if="item.money>=0">{{item.money | numFilter}} {{item.currency}}</view>
			<view class="money2" v-else-if="item.money<0">{{item.money | numFilter}} {{item.currency}}</view>
		</view>
		<view class="showtext">暂无更多数据</view>
		<uni-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer">
			<view style="padding:30upx;">
				<!-- <view class="uni-title" style="text-align: center;line-height: 50px;">筛选</view> -->
				<view class="uni-list uni-common-mt">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in screen" :key="index">
						<view class="uni-list-cell-navigate uni-navigate-right" :class="{active:index==inActive}" @tap="screenfun(item.id,index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from '../../components/uni-drawer.vue';
	export default {
		components: {
			uniDrawer
		},
		data() {
			return {
				list: [],
				rightDrawerVisible: false,
				screen: [],
				inActive: '0',
			};
		},
		onLoad() {
			this.getData('-1');
			this.getFundsType();
		},
		methods: {
			getData: function(type) {
				const _this = this;
				const data = {
					type: type,
				};
				//我的抢单列表
				this.$request.get("/api/ucenter/getFundsList", {
						data: data
					})
					.then(res => {
						if (res.data.code == 1) {
							_this.list = res.data.data;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});

			},
			golink(type, id) {
				if (type != 2) {
					return
				}
				// 跳转到其他页面
				uni.navigateTo({
					url: '../Recom_revenue/Recom_revenue?id=' + id
				})
			},
			getFundsType: function() {
				const _this = this;
				//获取资金筛选列表
				this.$request.get("/api/ucenter/getFundsType", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.screen = res.data.data;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			closeRightDrawer() { //关闭抽屉式导航
				this.rightDrawerVisible = false;
			},
			showRightDrawer() { //显示抽屉式导航
				this.rightDrawerVisible = true;
			},
			screenfun: function(id, index) { //筛选
				this.inActive = index;
				this.getData(id)
				this.rightDrawerVisible = false;
				// uni.showToast({
				// 	title: 'item1'
				// });
			},
		},
		onNavigationBarButtonTap(e) { //顶部导航右侧点击事件
			this.rightDrawerVisible = !this.rightDrawerVisible
		},
		onBackPress() {
			// 返回按钮监听
			if (this.rightDrawerVisible) {
				this.rightDrawerVisible = false;
				return true;
			}
		},
		filters: {

			numFilter(value) {
				// 截取当前数据到小数点后两位
				let realVal = Number(value).toFixed(2)
				// num.toFixed(2)获取的是字符串
				return Number(realVal)
			}
		}
	}
</script>

<style lang="less">
	.Detailed {
		width: 100%;

		.top {
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 5px solid #F1F1F1;
			border-bottom: 1px solid #F1F1F1;

			.title {
				flex: 1;
				text-align: center;
				font-size: 14px;
				color: #1F3F59;
			}
		}

		.list {
			display: flex;
			height: 60px;
			width: 96%;
			margin: 0 auto;
			align-items: center;
			border-bottom: 1px solid #F1F1F1;
			justify-content: center;
			font-size: 14px;

			.time {
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;

			}

			.type {
				flex: 1;
				text-align: center;

			}

			.money {
				flex: 1;
				text-align: center;
				background-color: #03AD8F;
				color: #FFF;
				padding: 5px 0;
				border-radius: 10upx;

			}

			.money2 {
				flex: 1;
				text-align: center;
				background-color: #D14B64;
				color: #FFF;
				padding: 5px 0;
				border-radius: 10upx;
				font-size: 14px;
			}
		}

		.showtext {
			text-align: center;
			font-size: 14px;
			line-height: 60px;
			color: #a9a9a9;
		}

	}

	.uni-list-cell-navigate {
		text-align: center;
		font-size: 14px;
		line-height: 80upx;
		border-bottom: 1px solid #F1F1F1;
	}

	.active {
		color: #00BCD4;
	}
</style>
